<!--
 * @Descripttion: 项目报名列表
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-10-13 18:35
 * @LastEditors: a12
 * @LastEditTime: 2020-10-13 18:35
-->
<template>
  <div class="page-box">
    <div class="page-box-content">
      <!--  搜索条件  -->
      <el-form :model="formInfo" ref="queryForm" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="询价时间" prop="timeArr">
              <el-date-picker
                  class="order-filter-date"
                  style="width:100%"
                  v-model="formInfo.timeArr"
                  type="daterange"
                  range-separator="—"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectNo">
              <el-input v-model="formInfo.projectNo" placeholder="项目编号"></el-input>
            </el-form-item>
            <el-form-item label="项目状态" prop="projectState">
              <el-select v-model="formInfo.projectState" placeholder="项目状态" clearable>
                <el-option :label="item.optional1"
                           :value="item.dictionaryKey1"
                           v-for="item in stateList"
                           :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="formInfo.projectName" placeholder="项目名称"></el-input>
            </el-form-item>
            <el-form-item label="采购单位" prop="purchaserName">
              <el-input v-model="formInfo.purchaserName" placeholder="采购单位"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right">
              <el-button type="" @click="resetForm('queryForm')">重置</el-button>
              <el-button type="primary" @click="onQuery()">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 列表 -->
      <el-table
          class="list"
          border
          :data="tableData"
          style="width: 100%"
          :max-height="maxHeightNow">
        <el-table-column type="index" width="60" label="序号"></el-table-column>
        <el-table-column prop="projectNo" label="项目编号" width="140"></el-table-column>
        <el-table-column label="项目名称" width="140">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <div class="cell-content">{{scope.row.projectName}}</div>
              <p class="overflow name-wrapper" slot="reference">{{scope.row.projectName}}</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="projectStateCName" label="项目状态" min-width="120"></el-table-column>
        <el-table-column prop="purchaserName" label="采购单位" width="140">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover">
              <div class="cell-content">{{scope.row.purchaserName}}</div>
              <p class="overflow name-wrapper" slot="reference">{{scope.row.purchaserName}}</p>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="uploadStatusName" label="上传保证金状态" min-width="120"></el-table-column>
        <el-table-column prop="auditStatusName" label="中心审核状态" min-width="120"></el-table-column>
        <el-table-column prop="" label="报名截止时间" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.endEnterTime|formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="询价开始时间" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.startTime | formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="询价结束时间" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.endTime | formeTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button v-if="$options.filters.proName(scope.row)" type="primary" size="mini" @click="projectApply(scope.row)" >{{ scope.row | proName}} </el-button>
            <el-button type="primary" size="mini" @click="viewProject(scope.row)" >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="set-pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {queryDictionaryList} from '@/api/common.api'
  import {certificateList} from '@/api/supplier.api'
  import moment from 'moment'
  export default {
    name: 'pro-certificate',
    components: {},
    data() {
      return {
        formInfo:{
          projectName: '',
          projectNo: '',
          projectState: '',
          purchaserName: '',
          timeArr: [],
        },
        stateList:{},
        tableData:[],
        currentPage:1,
        pageSize: 10,
        total: 0
      }
    },
    watch: {},
    filters: {
      formeTime(val){
        return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ' '
      },
      proName (row) {
        // 截止报名时间与当前时间对比结果，Y:截止报名时间大于当前时间 N:截止报名时间小于等于当前时间 / 倒计时
        if (row.compareFlag ==='Y' && row.projectState === '00026_0') {
          // 未上传保证金
          if (row.uploadStatus === 'UNDO') {
            return '项目报名'
          } else if (row.auditStatus === 'FAIL') {
            return '重新报名'
          } else {
            return ''
          }
        }
      }
    },
    computed: {
      // 表格高度
      maxHeightNow () {
        const height = window.innerHeight
        return height -  290
      }
    },
    created() {
      // 查询项目状态
      this.queryProjectStatusListFn()
    },
    mounted() {
      // 项目报名列表
      this.certificateListFn()
    },
    methods: {
      // 每页条数
      handleSizeChange(val) {
        this.pageSize = val
        this.certificateListFn ()
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val
        this.certificateListFn ()
      },
      /**
       * @description 项目报名列表
       * @author 穆宏宇
       * @date 2020-10-13 18:11:45
       * @param
       * @return
       * */
      certificateListFn() {
        const params = {
          current:this.currentPage,
          size:this.pageSize,
          startTime: (this.formInfo.timeArr && this.formInfo.timeArr.length) > 0 ? this.formInfo.timeArr[0] : '',
          endTime: (this.formInfo.timeArr && this.formInfo.timeArr.length) > 0 ? this.formInfo.timeArr[1] : '',
          projectNo: this.formInfo.projectNo,
          projectName:this.formInfo.projectName,
          projectState:this.formInfo.projectState,
          purchaserName:this.formInfo.purchaserName
        }
        certificateList(params).then(res=>{
          this.tableData = res.records
          this.total = res.total
        })
      },
      /**
       * @description 查询项目状态
       * @author 穆宏宇
       * @date 2020-10-13 10:19:10
       * @param
       * @return
       * */
      queryProjectStatusListFn () {
        const param = {dictionaryType: 'project_status'}
        queryDictionaryList(param).then(res=>{
          this.stateList = res
        })
      },
      // 项目资质查看
      viewProject (row) {
        const params = {
          certificateId: row.certificateId, // 资质信息ID
          uploadStatus:row.uploadStatus, // 上传状态
          projectId:row.projectId, // 项目ID
          isApply:false
        }
        this.$router.push({
          path:'/pro-editor',
          query:{data:JSON.stringify(params)}
        })
      },
      // 项目报名
      projectApply (row) {
        const params = {
          certificateId: row.certificateId, // 资质信息ID
          uploadStatus:row.uploadStatus, // 上传状态
          projectId:row.projectId, // 项目ID
          // list:[{sumPrice:row.sumPrice,pledgePrice:row.pledgePrice}],
          isApply: true
        }
        this.$router.push({
          path:'/pro-editor',
          query:{data:JSON.stringify(params)}
        })
      },
      // 项目修改
      editorProject (row) {
        const params = {
          certificateId: row.certificateId, // 资质信息ID
          uploadStatus:row.uploadStatus, // 上传状态
          projectId:row.projectId, // 项目ID
          isApply: true
        }
        this.$router.push({
          path:'/pro-editor',
          query:{data:JSON.stringify(params)}
        })
      },
      /**
       * @description 重置查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:14
       * @param
       * @return
       * */
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      /**
       * @description 查询
       * @author 穆宏宇
       * @date 2020-10-13 10:11:27
       * @param
       * @return
       * */
      onQuery () {
        this.certificateListFn()
      }
    }
  }
</script>

<style scoped lang="scss">
  .page-box {
    padding: 20px;
   &-content {
     padding: 20px;
     background: white;
     .el-range-editor, .el-select, .el-input {
       width: 80% !important;
     }
     .set-pagination {
       text-align: right;
     }
   }
  }
  .list {
    .el-button {
      margin-bottom: 10px;
    }
  }
  .cell-content {
    width: 200px;
    min-height: 20px;
    max-height: 200px;
    overflow-y: auto;
  }
  .overflow {
    width: 118px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
  }
</style>
